<template>
    <div class="container">
        <div class="title">
            <van-icon name="arrow-left" size="30" @click="go_back" />
            <h3>购物车</h3>
            <span v-show="is_guanli" @click="change_model">管理</span>
            <span v-show="!is_guanli" @click="change_model">完成</span>
        </div>
        <van-empty description="空空如也" v-if="!my_store.cart.length" style="height:80vh ;" />
        <div class="body" v-if="my_store.cart.length">
            <div class="item" v-for="(item,index) in my_store.cart" :key="index">
                <van-checkbox v-model="item.is_check" class="check_box">
                </van-checkbox>
                <div class="goods_info" @click="text_fn(item.goods_id)">
                    <div class="goods_img" :style="{'backgroundImage': `url(${item.goods_img})`}"></div>
                    <div class="goods_text">
                        <div class="goods_title">
                            <div class="goods_title_top">{{item.goods_title}}</div>
                            <div class="goods_title_bottom">{{item.goods_type}}</div>
                        </div>
                        <div class="goods_price">
                            <div class="good_price"><span>￥</span>{{item.goods_price}}</div>
                            <div class="good_num">
                                <van-stepper v-model="item.goods_num" @click="xxx" @focus="show_pop(item.goods_id)" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="foot">
            <van-checkbox class="check_all" v-model="check_all"></van-checkbox>
            <div class="delete_btn" v-show="!is_guanli" @click="delete_btn">删除</div>
            <div style="padding-left: 30vw;" v-show="is_guanli">
                <span style="font-size: 20px;">合计：</span>
                <span style="color: red; font-size: 20px;"><span
                        style="font-size: 15px;">￥</span>{{my_store.allPrice}}</span>
            </div>
            <div class="jiesuan" v-show="is_guanli" @click="jiesuan">结算</div>
        </div>
    </div>
    <van-popup v-model:show="show" closeable
        :style="{height:'30%',width:'90%',display: 'flex',justifyContent: 'space-around',alignItems: 'center',flexDirection:'column'}"
        @close="unSaved">
        <span>修改购买数量</span>
        <van-stepper input-width="40px" integer button-size="40px" v-model="change_num" />
        <div class="confirm_btn" @click="confirm_btn">确定</div>
    </van-popup>
</template>
    
<script setup lang='ts'>
import 'vant/es/toast/style';
import { ref, computed } from "vue"
import { useRouter } from 'vue-router';
import { useMainStore } from '@/store';
import { Toast } from "vant";
import Product from "@/api/main"
const _product = new Product()

const my_store = useMainStore()

function getCart() {
    let _product = new Product()
    _product.getCart().then(res => {
        res.data.forEach((item: any) => {
            item.is_check = false
        })
        my_store.cart = res.data
    })
}


getCart()




let show = ref(false)



let is_guanli = ref(true)
let Router = useRouter()

//点击管理或者完成事件
function change_model() {
    is_guanli.value = !is_guanli.value
}
//点击商品的跳转事件
function text_fn(id: any) {
    Router.push({
        path: '/goods_detail',
        query: {
            id
        }
    })
    _product.updateCart(my_store.cart).then(res => { })
}

//步进器阻止默认事件
function xxx(e: any) {
    e.stopPropagation()
}

//全选框的点击事件
const check_all = computed({
    get: () => my_store.isAllChecked,
    set: (val: any) => {
        my_store.all_check(val)
    },
})

//返回上一级
function go_back() {
    _product.updateCart(my_store.cart).then(res => { })
    Router.go(-1)
}

//结算按钮点击事件
function jiesuan() {
    if (my_store.jiesuan(1)) {
        Router.push({
            path: '/order',
            query: {
                type: 'gwc'
            }
        })
    }
}
//删除按钮点击事件
function delete_btn() {
    my_store.jiesuan(0)
}



//


let active_id: any = ref(-1)
let change_num: any = ref(1)
function show_pop(id: any) {
    active_id = id
    my_store.cart.forEach(item => {
        if (item.goods_id == active_id) {
            change_num.value = item.goods_num
        }
    })
    show.value = true
}

function confirm_btn() {
    show.value = false
    my_store.cart.forEach(item => {
        if (item.goods_id == active_id) {
            item.goods_num = change_num
        }
    })
}

function unSaved() {
    if (show.value !== true) {
        my_store.cart.forEach(item => {
            if (item.goods_id == active_id) {
                change_num.value = item.goods_num
            }
        })
    }
}


</script>
    
<style scoped>
.title {
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10vh;
    border-bottom: 1px solid gray;
    /* background-color: red; */
}

.body {
    box-sizing: border-box;
    height: 80vh;
    overflow: scroll;
    /* background-color: yellow; */
}

.foot {
    /* position: fixed;
    bottom: 0; */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 10vh;
}

.item {
    display: flex;
    height: 20vh;
}

.check_box {
    padding-left: 15px;
    flex: 1;
}

.goods_info {
    flex: 9;
    border-bottom: 1px solid gray;
    display: flex;
    margin: 5px;
}

.goods_img {
    margin-right: 15px;
    flex: 4;
    background-image: url('@/assets/ring.jfif');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.goods_text {
    flex: 7;
    display: flex;
    flex-direction: column;
}

.goods_title {
    flex: 4;
}

.goods_price {
    flex: 1;
    display: flex;
}

.goods_title_top {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 20px;
    font-weight: 500;
}

.goods_title_bottom {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: gray;
    margin-top: 10px;
}

.good_price {
    margin-top: 5px;
    color: red;
    flex: 1;
}

.good_price>span {
    font-size: 10px;
}

.good_num {
    flex: 1;
    margin-bottom: 10px;
}

.check_all {
    padding-left: 10px;
}

.jiesuan {
    text-align: center;
    color: #fff;
    width: 20vw;
    height: 10vh;
    line-height: 10vh;
    background-color: red;
    font-size: 18px;
}

.delete_btn {
    text-align: center;
    color: red;
    height: 5vh;
    width: 25vw;
    border: 1px solid red;
    border-radius: 33%;
    line-height: 5vh;
    margin-right: 15px;
}

.confirm_btn {
    text-align: center;
    line-height: 40px;
    color: #fff;
    width: 80%;
    height: 40px;
    border-radius: 8%;
    background-color: red;
}
</style>